<script setup lang="ts">
import { ref, onMounted,computed,toRaw } from "vue";
import ReCol from "@/components/ReCol";
import GroupLine from "@iconify-icons/ri/group-line";
import Question from "@iconify-icons/ri/question-answer-line";
import CheckLine from "@iconify-icons/ri/chat-check-line";
import AccountBox from "@iconify-icons/ri/account-box-fill";
import Airplay from "@iconify-icons/ri/airplay-fill";
import Smile from "@iconify-icons/ri/star-smile-line";
import AmazonFill from "@iconify-icons/ri/amazon-fill";
import AnchorFill from "@iconify-icons/ri/anchor-fill";
import AtFill from "@iconify-icons/ri/at-fill";
import ArchiveFill from "@iconify-icons/ri/archive-fill";
import MemoriesFill from "@iconify-icons/ri/memories-fill";
import MemoneyFill from "@iconify-icons/ri/money-dollar-box-fill";
import OrderPlay from "@iconify-icons/ri/shopping-cart-2-fill";
import { useDark } from "@pureadmin/utils";
//
const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light"));
// const chartRef = ref();
const props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  api: {
    type: Function,
    default: () => function (){}
  },
  size: {
    type: Number,
    default: () => ''
  }
});
const search_field = ref('today');
const time = ref([formatDate(new Date()),formatDate(new Date())]);


function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
const selectType =function (v){
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1);

  const last7Days = new Date(today);
  last7Days.setDate(today.getDate() - 6);

  const last30Days = new Date(today);
  last30Days.setDate(today.getDate() - 29);

  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

  const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
  const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);

  if(v=='today'){
    time.value = [formatDate(today),formatDate(today)]
  }else if(v=='yesterday'){
    time.value = [formatDate(yesterday),formatDate(yesterday)]
  }else if(v=='7day'){
    time.value = [formatDate(last7Days),formatDate(today)]
  }else if(v=='30day'){
    time.value = [formatDate(last30Days),formatDate(today)]
  }else if(v=='month'){
    time.value = [formatDate(firstDayOfMonth),formatDate(lastDayOfMonth)]
  }else if(v=='lastmonth'){
    time.value = [formatDate(firstDayOfLastMonth),formatDate(lastDayOfLastMonth)]
  }else{
    time.value = []
  }
  getData();
}
const chartDataOrder = ref([])
async function getData(){
  const { data } = await props.api(toRaw({time:time.value}))
  chartDataOrder.value = data
}
onMounted(() => {
  getData();
});

const Icon = [
  {'icon':OrderPlay,'bgColor':'#effaff','color':'#41b6ff','name':'订单量','type':'简报'},
  {'icon':Question,'bgColor':'#fff5f4','color':'#3d6b56','name':'订单销售额','type':'简报'},
  {'icon':CheckLine,'bgColor':'#26ce83','color':'#263886','name':'退款订单数','type':'简报'},
  {'icon':ArchiveFill,'bgColor':'#0f033f','color':'#b6a1e7','name':'退款金额','type':'简报'},
  {'icon':AmazonFill,'bgColor':'#771e08','color':'#b59ee7','name':'新增分配数','type':'跟进状态'},
  {'icon':AnchorFill,'bgColor':'#2d0318','color':'#c7bce0','name':'已付款','type':'跟进状态'},
  {'icon':Airplay,'bgColor':'#f6f4fe','color':'#7846e5','name':'跟进超时','type':'跟进状态'},
  {'icon':Smile,'bgColor':'#34062b','color':'#cfc3ea','name':'弃单数','type':'跟进状态'},
  {'icon':Question,'bgColor':'#243f42','color':'#78af83','name':'实物采集任务','type':'实物图片采集'},
  {'icon':AtFill,'bgColor':'#05522f','color':'#46e5c0','name':'未完成数','type':'实物图片采集'},
  {'icon':MemoriesFill,'bgColor':'#f6f4fe','color':'#48405b','name':'已完成数量','type':'实物图片采集'},
  {'icon':MemoneyFill,'bgColor':'#8d3a3a','color':'#e2d9f5','name':'回款金额','type':'财务简报'},
].filter(x=>x.type==props.title)
</script>
<template>

  <div class="flex justify-between">
    <span class="text-md font-medium">{{ title }}</span>

    <div>
      <el-form-item style="margin-bottom:5px;">
        <el-select v-model="search_field" placeholder="选择时间" class="search_field" @change="selectType" style="width: 103px;border-radius:0;border-right:0px">
          <el-option label="今天" value="today" />
          <el-option label="昨天" value="yesterday" />
          <el-option label="最近七天" value="7day" />
          <el-option label="最近30天" value="30day" />
          <el-option label="本月" value="month" />
          <el-option label="上月" value="lastmonth" />
          <el-option label="自定义" value="diy" />
        </el-select>
        <el-date-picker
          v-model="time" value-format="YYYY-MM-DD" format="YYYY-MM-DD"  @change="getData"
          type="daterange" style="width: 220px;border-radius: 0px;border-left: 0;margin-left: -1px;"
          range-separator="~" prefix-icon=""
          start-placeholder="Start date"
          end-placeholder="End date"
        >
        </el-date-picker>
      </el-form-item>
    </div>

  </div>

  <div class="flex justify-between items-start mt-3" >
    <re-col v-motion class="mb-[18px]" v-for="(item, index) in chartDataOrder.list" :key="index"
            :value="6" :md="12" :sm="12" :xs="24" :initial="{ opacity: 0, y: 100 }"
            :enter="{opacity: 1,y: 0, transition: { delay: 80 * (index + 1) } }" >
      <div class="flex justify-between items-start mt-3">
        <div class="w-1/3 icon22" :style="{ backgroundColor: isDark ? 'transparent' : Icon[index].bgColor}">
          <IconifyIconOffline :icon="Icon[index].icon"  :color="Icon[index].color" width="30" class="icon33"/>
        </div>
        <div class="!w-2/3"><p class="font-medium2">{{item.value}}</p><p class="font-txt">{{item.name}}</p></div>
      </div>
    </re-col>
  </div>
  <el-row :gutter="20">
    <el-col :span="4" v-for="item in chartDataOrder.bu">
      <el-badge :value="item.count" class="item" style="margin-top: 5px" max="9999">
        <el-button>{{item.name}}</el-button>
      </el-badge>
    </el-col>
  </el-row>

  <el-row :gutter="20" style="margin-top: 15px">
    <el-col :span="4" v-for="item in chartDataOrder.zu">
      <el-badge :value="item.count" class="item" type="warning" style="margin-top: 5px" max="9999">
        <el-button>{{item.name}}</el-button>
      </el-badge>
    </el-col>
  </el-row>

  <el-row :gutter="20" style="margin-top: 15px">
    <el-col :span="4" v-for="item in chartDataOrder.member">
      <el-badge :value="item.count" class="item" type="primary"  style="margin-top: 5px" max="9999">
        <el-button>{{item.name}}</el-button>
      </el-badge>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
:deep(.el-card) {

}

.main-content {
}
.icon22{
width:40px;height: 40px;border-radius: 50%;
}
.font-medium{font-size: 15px;}
.font-medium2{font-size: 18px;}
.icon33{
display: flex;align-items: center;width: 24px; height: 24px; margin-top: 8px;margin-left: 8px;
}
.font-txt{
font-size: 12px;
}
</style>
